<!--热力图-->
<template>
  <div class="chartcontainer" v-if="iffresh">
    <div :style="{'margin-bottom':'10px'}" v-if="title">{{title}}</div>
    <!-- :judge-width="true" -->
    <ve-heatmap
      :data="blockdata"
      width="100%"
      height="100%"
      ref="mychart"
      :theme="theme"
      :judge-width="true"
      :after-config="afterConfig"
      :grid="grid"
      :visual-map="chartVisualMap"
    ></ve-heatmap>
  </div>
</template>

<script>
import VeHeatMap from "v-charts/lib/heatmap.common";

export default {
  name: "block1",
  props: {
    chartData: [Object],
    changesizewidth: [Number, String],
    changesizeheight: [Number, String],
    theme: [Object],
    title: [String],
    searchid: [String],
    chartid: [String],
    mobiletype: [String],
    field: [String],
    isShowLegend: {
      type: Boolean,
      default: true
    },
    max: {
      type: [Number,String],
      default: 100
    },
    min: {
      type: [Number,String],
      default: 0
    },
    eArea: {
      type: Boolean,
      default: false
    },
    labelShow: {
      type: Boolean,
      default: true
    },
    isShowToolbox: {
      type: Boolean,
      default: true
    },
    eGrid: [Object],
    eAxisLabelRotate: {
      type: [Number, String],
      default: 0
    },
    eAxisLabelAlign: {
      type: [Number, String],
      default: "vertical"
    }
  },
  data() {
    this.chartSettings = {};
    this.grid = {
      left: 120,
      top: 10,
      bottom: 120,
      right: 40
    };
    this.chartVisualMap = {
      show: true,
      // calculable: true,
      orient: "vertical",
      right: "0",
      top: "0",
      max: this.max,
      min: 0,
      inRange: {
        color: ["#CCEBFF", "#005288"]
      }
    };
    return {
      intervaltime: this.timer,
      blockdata: this.chartData,
      iffresh: true
    };
  },

  components: { VeHeatMap },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    afterConfig(options) {
      
      if (!this.isShowLegend) {
        options.legend = {
          data: []
        };
      }
      options.yAxis.axisLabel = {
        textStyle: {
          fontSize: 12 //刻度大小
        }
      };
      options.xAxis.axisLabel = {
        interval: this.eAxisLabelRotate,
        textStyle: {
          fontSize: 12 //刻度大小
        },
        formatter: function(val) {
          if (val.length < 10) {
            return val.split("").join("\n");
          }
          var strs = val.split(""); //字符串数组
          var str = "";
          for (var i = 0, s; (s = strs[i++]); ) {
            //遍历字符串数组
            str += s;
            if (!(i % 2)) str += "\n"; //按需要求余
          }
          return str;
        } //横轴
      };

      // if (!this.isShowToolbox) {
      //   options.toolbox = {
      //     feature: {
      //       saveAsImage: {}
      //     }
      //   };
      // }
      return options;
    }
  },
  watch: {
    changesizewidth(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },

    changesizeheight(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    chartData(oldvalue, newvalue) {
      this.blockdata = oldvalue;
    }
  }
};
</script>
<style scoped lang="scss">
.chartcontainer {
  width: 100%;
  height: 100%;
}
</style>

